<template>
  <div class="ele-body">
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-row>
        </a-form>
      </a-card>
    </div>

    <!-- 表格 -->
    <div>
      <a-card :bordered="false" class="table-height">
        <BasicTable
          :canResize="false"
          ref="tableRef"
          :api="DevopsDoHostMachineApi.findPage"
          :where="where"
          :columns="columns"
          showTableSetting
          rowkey="hostMachineId"
          :rowSelection="{
            type: 'checkbox',
            selectedRowKeys: checkedKeys,
          }"
        >
          <!-- table上边工具栏 -->
          <template #toolbar>
            <a-space>
              <a-button type="primary" @click="openEdit()">
                <template #icon>
                  <plus-outlined />
                </template>
                <span>新建</span>
              </a-button>
            </a-space>
          </template>

          <template #bodyCell="{ column, record }">
            <!-- table操作栏按钮 -->
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="openEdit(record)">修改</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
                  <a class="ele-text-danger">删除</a>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </a-card>
    </div>

    <!-- 编辑弹窗 -->
    <devopsDoHostMachine-edit v-model:visible="showEdit" :data="current" @done="reload" />
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { BasicTable } from '/@/components/Table';
import { DevopsDoHostMachineApi } from '/@/api/system/operation/DevopsDoHostMachineApi';
import DevopsDoHostMachineEdit from './devops_do_host_machine_edit.vue';

const where = reactive({
  timerName: '',
  jobStatus: '',
});

const columns = ref<string[]>([
  {
    title: '主机名称',
    dataIndex: 'hostMachineName'
  },
  {
    title: '主机ip',
    dataIndex: 'hostMachineIp'
  },
  {
    title: '操作系统',
    dataIndex: 'operatingSystem'
  },
  {
    title: 'SSH端口',
    dataIndex: 'sshPort'
  },
  {
    title: '认证方式',
    dataIndex: 'authenticationType'
  },
  {
    title: '主机用户名',
    dataIndex: 'hostMachineUserName'
  },
  {
    title: '主机密码',
    dataIndex: 'hostMachinePassword'
  },
  {
    title: '秘钥密码',
    dataIndex: 'hostSecretKeyCipher'
  },
  {
    title: '主机状态',
    dataIndex: 'hostMachineState'
  },
]);

const checkedKeys = ref<Array<string | number>>([]);

const current = ref<any>(null);

const showEdit = ref<boolean>(false);

const tableRef = ref(null); 

const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

const reset = () => {
  where.timerName = '';
  where.jobStatus = '';
  reload();
};

</script>
